<template>
  <div v-if="planId" class="c-p" :style="'z-index:'+zIndex">
    <div class="circle-learn-nav c-flex-row c-justify-center c-aligni-center c-ph12 c-pv10">
      <div @click="showColumn" class="c-flex-shrink0 c-fs22 c-fc-sblack c-ml16 c-mr20 column-btn"><i class="iconfont c-fs22">&#xe79a;</i>目录</div>
      <div @click="prevTask" class="theme-bg-10 theme-fc c-fs22 c-hh50 c-flex-1 theme-bd1 c-br30 c-mh10 c-flex-row c-justify-center c-aligni-center">上一任务</div>
      <div @click="nextTask" class="theme-bg-10 theme-fc c-fs22 c-hh50 c-flex-1 theme-bd1 c-br30 c-mh10 c-flex-row c-justify-center c-aligni-center">下一任务</div>
    </div>
    <learn-column ref="circleLearnColumn" :planId="planId" :circleId="circleId" @getDataList="getDataList"></learn-column>
  </div>
</template>
<script>
import learnColumn from "@/components/templates/circle/learnColumn.vue";
import circleUtils from '@/utils/circleUtils.js';
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: 'learnNav',
  components: {
    learnColumn,
  },
  props: {
    zIndex: {
      type: Number,
      default: 99
    },
    planId: {
      type: Number,
      default: 0
    },
    circleId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isShowColumn: false
    }
  },
  activated() {
    this._courseId = this.$route.query.courseId;
    setTimeout(() => {
      if (this.$refs.circleLearnColumn) {
        this.$refs.circleLearnColumn.getList().then((data) => {
          this._learnList = data;
          this._currLearnIndex = this._getCurrentLearnIndex(this._learnList);
        });
      }
    }, 1000)
  },
  computed: {},
  methods: {
    nextTask() {
      if (this._currLearnIndex == (this._learnList.length - 1)) {
        this.$showCjToast({
          text: '当前已经是最后一个任务了',
          type: 'text'
        });
      } else {
        this._currLearnIndex++;
        let item = this._learnList[this._currLearnIndex];
        console.log("item", item);
        if (item.relType == 500) {
          this.$routerGo(this, "replace", {
            path: "/homePage/circle/circlePlanClockinDetail",
            query: {
              circleId: this.circleId,
              clockinId: item.relId,
            }
          })
        } else {
          let courseType = item.relType == 111 ? 1 : item.relType == 112 ? 2 : 0;
          let prodType = item.relType == 110 || item.relType == 111 || item.relType == 112 ? global.ckFrom.course : item.relType;
          goDetails(this, prodType, item.relId, { circleId: this.circleId, circlePlanId: this.planId }, courseType);
        }
        circleUtils.addPlanMember(this.circleId, this.planId);
      }
    },
    prevTask() {
      if (this._currLearnIndex == 0) {
        this.$showCjToast({
          text: '当前已经是第一个任务了',
          type: 'text'
        });
      } else {
        this._currLearnIndex--;
        let item = this._learnList[this._currLearnIndex];
        console.log("item", item);
        if (item.relType == 500) {
          this.$routerGo(this, "replace", {
            path: "/homePage/circle/circlePlanClockinDetail",
            query: {
              circleId: this.circleId,
              clockinId: item.relId,
            }
          })
        } else {
          let courseType = item.relType == 111 ? 1 : item.relType == 112 ? 2 : 0;
          let prodType = item.relType == 110 || item.relType == 111 || item.relType == 112 ? global.ckFrom.course : item.relType;
          goDetails(this, prodType, item.relId, { circleId: this.circleId, circlePlanId: this.planId }, courseType);
        }
        circleUtils.addPlanMember(this.circleId, this.planId);
      }
    },
    showColumn() {
      this.$refs.circleLearnColumn.open();
    },
    _getCurrentLearnIndex(data) {
      let index = data.findIndex(item => item.relId == this._courseId);
      if (index != -1) {
        return index;
      } else {
        return 0;
      }
    },
  }
}
</script>
<style scoped lang="scss">
.circle-learn-nav {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 2.2rem;
  background: #ffffff;
  box-shadow: 0 -0.1rem 0.2rem 0 rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem 0.5rem 0 0;
  z-index: 99;
}
.column-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 1.2rem;
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
  border-radius: 30px;
}

@media screen and (min-width: 640px) {
  .circle-learn-nav {
    width: 16rem;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
</style>